<template>
  <h1>1.组件的基本写法</h1>
  <p>{{ person }}</p>
  <button @click="changePerson">修改person的属性</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "About",
});
</script>

<script lang="ts" setup>
import {ref,watch} from "vue";

/* 
  wacth监视一个对象类型响应数据（ref）
  -watch如果监听的是某个对象，则默认监听的是这个对象内部属性的变化（默认进行深度监听）
*/
// count逻辑
let person =ref({
  name:"老王",
  age:18,
  score:{
    math:100,
    en:90,
  },
});

const changePerson =() =>{
  person.value.score.math =101;
};
// 监视ref对象person
watch (person.value,(newVal,oldVal)=>{
  console.log("count的监听",newVal,oldVal);
  
})
</script>

<style scoped></style>
